$dialog-bg-color: #f4f4f4;
$dialog-close-btn-color: #909399;
$dialog-header-color: #f8f8f8;
$dialog-header-border-color: #eeeeee;

.dialog-mask {
  // 使用相对定位
  position: fixed;
  // 其它的left、top等在ModalDialog里设置

  // 背景颜色(半透明)
  background-color: rgba(0, 0, 0, 0.3);

  // 禁止滚动
  overflow: hidden;

  .dialog-content {
    // 相对定位
    position: relative;
    // 其它的left、top等在ModalDialog里设置

    // 禁止滚动
    overflow: hidden;

    // 边框设置
    // border: 0.5px solid rgba(0, 0, 0, 0.2);
    // border-radius: 6px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);

    // 背景色和字体颜色
    background-color: $dialog-bg-color;

    // 使用flex布局子元素
    display: flex;
    flex-direction: column;
    align-items: stretch;
    // justify-content: center;

    .dialog-header {
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      padding-left: 5px;
      // text-align: center;
      background-color: $dialog-header-color;
      border-bottom: 1px solid $dialog-header-border-color;

      .el-dialog__headerbtn {
        position: absolute;
        top: 8px;
        right: 10px;
        padding: 0;
        background: transparent;
        border: none;
        outline: none;
        cursor: pointer;
        font-size: 16px;

        .el-dialog__close {
          color: $dialog-close-btn-color;
        }
      }
    }

    .dialog-footer {
      font-size: 16px;
      height: 40px;
      text-align: center;
    }

    .dialog-body {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      font-size: 12px;
      // padding: 3px;
      // @import './scrollbar.scss';
    }
  }
}
// https://www.mybj123.com/5131.html
// 在el-dialog标签中设置class="pub_dialog""即可
// 弹窗为页面高度的90%，且上下居中, el-dialog__body内容部分会根据内容的高度，自动显示上下的滚动条
.pub_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  .el-dialog {
    margin: 0 auto !important;
    height: 90%;
    overflow: hidden;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
    }
  }
}
